<template>
  <Link
    class="creator gap-col-5 pointer"
    :href="`/${item.username}`"
    :title="item.nickname || item.username"
    @click="() => $emit('click:item', item.aff, item.username)"
  >
    <div class="avatar">
      <Avatar :src="item.avatar" :radius="radius" :vip="item.is_vip"></Avatar>
    </div>
    <div class="name text-white text-center font-size-14 font-style-normal font-weight-500 line-height-140">
      {{ item.nickname }}
    </div>
  </Link>
</template>
<script setup>
import Link from '../common/Link.vue'
import Avatar from './Avatar.vue'

defineProps({
  item: {
    type: Object,
    required: true,
  },
  radius: {
    type: Number,
    default: 35,
  },
})

defineEmits(['click:item'])
</script>
<style scoped lang="scss">
.creator {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  flex-shrink: 0;
}
.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.name {
  width: 4.98438rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
